<script lang="ts" setup>
import { ref } from 'vue'

// 页面配置
definePage({
  style: {
    navigationBarTitleText: '消息设置',
    backgroundColor: '#FFFFFF',
    navigationBarTextStyle: 'black',
  },
})

// 通知方式状态管理
const notificationMethods = ref({
  appNotification: true, // 应用内消息通知
  systemNotification: true, // 手机系统通知
  smsNotification: false, // 短信通知
})

// 通知类型状态管理
const notificationTypes = ref({
  pendingApproval: true, // 待办通知
  approvalResult: true, // 审批结果通知
  reminder: true, // 催办通知
  timeoutAlert: true, // 超时提醒
})

// 处理通知方式开关切换
function handleMethodToggle(key: keyof typeof notificationMethods.value) {
  notificationMethods.value[key] = !notificationMethods.value[key]
  console.log(`通知方式 ${key} 已${notificationMethods.value[key] ? '开启' : '关闭'}`)
  // 这里可以添加保存设置到服务器或本地存储的逻辑
}

// 处理通知类型开关切换
function handleTypeToggle(key: keyof typeof notificationTypes.value) {
  notificationTypes.value[key] = !notificationTypes.value[key]
  console.log(`通知类型 ${key} 已${notificationTypes.value[key] ? '开启' : '关闭'}`)
  // 这里可以添加保存设置到服务器或本地存储的逻辑
}

// 页面加载时执行
onLoad(() => {
  // 可以在这里从服务器或本地存储加载用户的通知设置
  console.log('通知设置页面已加载')
})
</script>

<template>
  <view class="notification-settings-container min-h-screen bg-slate-50">
    <!-- 通知方式区域 -->
    <view class="setting-section mb-2">
      <view class="section-header px-4 py-2">
        <view class="flex items-center">
          <i class="i-solar:bell-bing-broken mr-2 text-primary" />
          <text class="text-lg text-slate-800 font-medium">通知方式</text>
        </view>
      </view>

      <view class="section-content bg-white">
        <!-- 应用内消息通知 -->
        <view class="setting-item border-b border-slate-200 px-4 py-3">
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <!-- <i class="i-solar:notes-minimalistic-broken mr-3 text-slate-400" /> -->
              <view>
                <text class="block text-slate-800">应用内消息通知</text>
                <text class="text-xs text-slate-500">在应用内显示通知消息</text>
              </view>
            </view>
            <switch
              :checked="notificationMethods.appNotification"
              color="#22c55e"
              @change="handleMethodToggle('appNotification')"
            />
          </view>
        </view>

        <!-- 手机系统通知 -->
        <view class="setting-item border-b border-slate-200 px-4 py-3">
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <!-- <i class="i-solar:phone-calling-rounded-broken mr-3 text-slate-400" /> -->
              <view>
                <text class="block text-slate-800">手机系统通知</text>
                <text class="text-xs text-slate-500">通过系统通知栏推送</text>
              </view>
            </view>
            <switch
              :checked="notificationMethods.systemNotification"
              color="#22c55e"
              @change="handleMethodToggle('systemNotification')"
            />
          </view>
        </view>

        <!-- 短信通知 -->
        <view class="setting-item px-4 py-3">
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <!-- <i class="i-solar:documents-broken mr-3 text-slate-400" /> -->
              <view>
                <text class="block text-slate-800">短信通知</text>
                <text class="text-xs text-slate-500">重要通知通过短信发送</text>
              </view>
            </view>
            <switch
              :checked="notificationMethods.smsNotification"
              color="#22c55e"
              @change="handleMethodToggle('smsNotification')"
            />
          </view>
        </view>
      </view>
    </view>

    <!-- 通知类型区域 -->
    <view class="setting-section mb-2">
      <view class="section-header px-4 py-2">
        <view class="flex items-center">
          <i class="i-solar:bag-smile-broken mr-2 text-primary" />
          <text class="text-lg text-slate-800 font-medium">通知类型</text>
        </view>
      </view>

      <view class="section-content bg-white">
        <!-- 待办通知 -->
        <view class="setting-item border-b border-slate-200 px-4 py-3">
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <!-- <i class="i-solar:clock-circle-broken mr-3 text-orange-500" /> -->
              <view>
                <text class="block text-slate-800">待办通知</text>
                <text class="text-xs text-slate-500">有待办处理审批时通知</text>
              </view>
            </view>
            <switch
              :checked="notificationTypes.pendingApproval"
              color="#22c55e"
              @change="handleTypeToggle('pendingApproval')"
            />
          </view>
        </view>

        <!-- 审批结果通知 -->
        <view class="setting-item border-b border-slate-100 px-4 py-3">
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <!-- <i class="i-solar:check-circle-broken mr-3 text-green-500" /> -->
              <view>
                <text class="block text-slate-800">审批结果通知</text>
                <text class="text-xs text-slate-500">审批通过或驳回时通知</text>
              </view>
            </view>
            <switch
              :checked="notificationTypes.approvalResult"
              color="#22c55e"
              @change="handleTypeToggle('approvalResult')"
            />
          </view>
        </view>

        <!-- 催办通知 -->
        <view class="setting-item border-b border-slate-100 px-4 py-3">
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <!-- <i class="i-solar:alarm-pause-broken mr-3 text-red-500" /> -->
              <view>
                <text class="block text-slate-800">催办通知</text>
                <text class="text-xs text-slate-500">收到催办请求时通知</text>
              </view>
            </view>
            <switch
              :checked="notificationTypes.reminder"
              color="#22c55e"
              @change="handleTypeToggle('reminder')"
            />
          </view>
        </view>

        <!-- 超时提醒 -->
        <view class="setting-item px-4 py-3">
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <!-- <i class="i-solar:alarm-remove-broken mr-3 text-blue-500" /> -->
              <view>
                <text class="block text-slate-800">超时提醒</text>
                <text class="text-xs text-slate-500">审批即将超时或已超时</text>
              </view>
            </view>
            <switch
              :checked="notificationTypes.timeoutAlert"
              color="#22c55e"
              @change="handleTypeToggle('timeoutAlert')"
            />
          </view>
        </view>
      </view>
    </view>

    <!-- 提示信息 -->
    <view class="tips-section mt-3 bg-slate-50 px-4 py-3">
      <view class="flex items-start">
        <i class="i-solar:info-circle-broken mr-2 mt-1 text-slate-400" />
        <view class="text-sm text-slate-600">
          <text class="block">• 部分通知类型可能需要同时开启对应的通知方式</text>
          <text class="mt-1 block">• 短信通知仅用于重要事项，避免频繁打扰</text>
          <text class="mt-1 block">• 您可以随时在此页面调整通知设置</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.notification-settings-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  padding-bottom: 20px;
}

:deep(.uni-switch-input) {
  background-color: #d1d5db;
}

:deep(.uni-switch-input.uni-switch-input-checked) {
  background-color: #22c55e;
}

.setting-section {
  margin-bottom: 8px;
}

.section-header {
  font-weight: 500;
}

.section-content {
  overflow: hidden;
}

.setting-item {
  transition: background-color 0.2s ease;
}

.setting-item:active {
  background-color: #f3f4f6;
}

.tips-section {
  border-radius: 4px;
}

// 确保switch组件样式正确
::v-deep(.uni-switch-input) {
  transition: all 0.3s ease;
}
</style>
